<template>
	<view>
		<tt-cropper mode="ratio" :imageUrl="model.imageUrl" :width="500" :height="500" :radius="90" :delay="300" @cancel="onCancel" @confirm="onConfirm"></tt-cropper>
		<view class="preview"><image v-for="(item, index) in model.resultUrl" :key="item.id" class="images" @click="prviewImgae(index, item.url)" :src="item.url" /></view>
		<button class="button" type="primary" @click="selectFile">选择图片</button>
	</view>
</template>

<script>
	// import ttCropperVue from '../../plugins/tt-cropper/components/tt-cropper/tt-cropper.vue';
export default {
	data() {
		return {
			model: {
				imageUrl: '',
				resultUrl: []
			}
		};
	},
	components: {
		// ttCropperVue
	},
	methods: {
		// 使用uni.compressImage压缩图片
		compressImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original'],
				success: res => {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});
					// 使用uni.compressImage压缩图片
					uni.compressImage({
						src: res.tempFilePaths[0],
						quality: 80, // 压缩质量
						success: compressRes => {
							this.model.imageUrl = compressRes.tempFilePath;
						},
						fail: err => {
							console.error('图片压缩失败：', err);
						},
						complete: () => {
							uni.hideLoading(); // 关闭loading
						}
					});
				}
			});
		},
		// 使用默认压缩方式
		defaultCompressImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				success: res => {
					this.model.imageUrl = res.tempFilePaths[0];
				}
			});
		},
		/**
		 *** 特别声明：在使用uni.chooseImage选择的大图片文件无法直接在Image组件中显示，通常涉及到以下可能的问题和限制。
		 *** 图片大小和尺寸限制：移动设备和浏览器对于能够加载和处理的图片大小有限制，如果选择的图片文件尺寸过大，可能无法正常加载和显示。
		 *** 性能问题：大图片文件可能会导致页面加载缓慢或者卡顿，尤其是在移动设备上。
		 *** 内存问题：加载大图片可能会消耗大量的内存资源，特别是在移动设备上，可能导致内存不足或者页面崩溃的问题。
		 *** 解决参考方案如下：
		 *** 防止选择大文件图片后无法在Image中直接临时路径显示图片，导致无法在裁剪插件中显示，
		 *** 根据项目需要对大尺寸图片进行压缩、对图片质量要求高的，需要提前上传至oss进行采用网络图片进行裁剪。
		 */
		selectFile() {
			// 推荐使用其他压缩方式：这里只是简单对大文件图片压缩-仅供思路参考，切勿使用该方式
			// 示例一：uni.compressImage压缩图片
			// this.compressImage();

			// 示例二：使用自带压缩图
			this.defaultCompressImage();
		},

		// 关闭
		onCancel() {
			this.model.imageUrl = '';
		},

		// 确定裁剪
		onConfirm(res) {
			const params = {
				id: new Date().getTime(),
				url: res.tempFilePath
			};
			this.model.resultUrl.push(params);
			this.model.imageUrl = '';
		},

		// 预览图片
		prviewImgae(index, url) {
			uni.previewImage({
				current: index, // 当前资源下标
				urls: [url]
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.preview {
	padding: 32rpx;

	.images {
		margin: 10rpx;
		width: 200rpx;
		height: 200rpx;
	}
}
.button {
	margin: 0 20rpx;
}
</style>
